<!--
 * @Author: early-autumn
 * @Date: 2020-05-15 15:37:53
 * @LastEditors: early-autumn
 * @LastEditTime: 2020-06-05 14:33:58
-->
<template>
  <div>
    <el-form inline size="small">
      <el-form-item label="会员等级：">{{
        formatterDict(vipInfo.vipLevel, 'vipLevel')
      }}</el-form-item>
      <el-form-item label="会员卡号：">{{
        vipInfo.vipNo || '暂未绑卡'
      }}</el-form-item>
      <el-form-item v-if="!vipInfo.vipNo">
        <el-button type="primary" @click="handleCardNumber">
          设置会员卡号
        </el-button>
      </el-form-item>
    </el-form>
    <el-row :gutter="20">
      <el-col :lg="{ span: 12 }">
        <el-card class="card" shadow="hover">
          <div slot="header" class="card__header">
            <span>储值</span>
            <div>
              <el-button
                class="card__header-button"
                type="text"
                @click="handleTransactionVisible"
                >交易</el-button
              >
              <el-button
                class="card__header-button"
                type="text"
                @click="handleTransactionRecordVisible"
              >
                交易记录
              </el-button>
            </div>
          </div>
          <div class="card__content">
            <label-value label="储值余额">
              <span class="card__content-number">{{
                vipInfo.availableMoney
              }}</span>
            </label-value>
          </div>
        </el-card>
      </el-col>
      <el-col :lg="{ span: 12 }">
        <el-card class="card" shadow="hover">
          <div slot="header" class="card__header">
            <span>积分</span>
            <div>
              <el-button class="card__header-button" type="text"
                >积分录入</el-button
              >
              <el-button class="card__header-button" type="text"
                >积分记录</el-button
              >
              <el-button class="card__header-button" type="text"
                >积分兑换</el-button
              >
              <el-button class="card__header-button" type="text"
                >返现操作</el-button
              >
              <el-button class="card__header-button" type="text"
                >返现记录</el-button
              >
            </div>
          </div>
          <div class="card__content">
            <label-value label="当前积分" label-width="120">
              <span class="card__content-number">{{
                vipInfo.membershipPointsAvailable
              }}</span>
            </label-value>
            <!-- <label-value label="可抵扣返现金额" label-width="120">
              <span
                class="card__content-number"
                :class="'card_content-number--warning'"
                >0.00</span
              >
            </label-value> -->
          </div>
        </el-card>
      </el-col>
    </el-row>
    <transaction
      v-model="transactionVisible"
      :vip-info="vipInfo"
      :patient="patient"
      @change="handleTransactionVisibles"
    />
    <transaction-record
      v-model="transactionRecordVisible"
      :vip-info="vipInfo"
      :patient="patient"
      @change="handleTransactionRecordVisibles"
    />
  </div>
</template>

<script>
import LabelValue from '@/components/yiya/LabelValue'
import Transaction from './Transaction'
import TransactionRecord from './TransactionRecord'
import { updatePerson } from '@/api/services/person'
import { getUserinfo } from '@/api/erp/vipUserInfo'
import { mapGetters } from 'vuex'

export default {
  name: 'MemberInformationPane',
  components: {
    LabelValue,
    Transaction,
    TransactionRecord,
  },
  props: {
    patient: {
      type: Object,
      default: () => ({}),
    },
  },
  data() {
    return {
      // 显示交易
      transactionVisible: false,
      // 显示交易记录
      transactionRecordVisible: false,
      // 用户会员信息
      vipInfo: {},
    }
  },
  computed: {
    ...mapGetters('dict', ['vipLevel']),
  },
  mounted() {
    this.getUserInfoVip()
  },
  methods: {
    async getUserInfoVip() {
      const { data } = await getUserinfo(this.patient.id)
      this.vipInfo = data
    },
    /**
     * 设置会员卡号
     */
    async handleCardNumber() {
      //   try {
      //     const { value: cardNumber } = await this.$prompt(
      //       '会员卡号：',
      //       '设置会员卡号',
      //       {
      //         inputPlaceholder: '请输入会员卡号',
      //         inputValidator: (value) => !!value,
      //         inputErrorMessage: '会员卡号不能为空',
      //       }
      //     )
      //     await updatePerson({
      //       id: this.patient.id,
      //       cardNumber,
      //     })
      //     this.msgSuccess('设置成功')
      //     this.$emit('update')
      //   } catch (err) {}
    },
    /**
     * 显示交易
     */
    handleTransactionVisible() {
      this.transactionVisible = true
    },
    handleTransactionVisibles() {
      this.transactionVisible = false
    },
    /**
     * 显示交易记录
     */
    handleTransactionRecordVisible() {
      this.transactionRecordVisible = true
    },
    handleTransactionRecordVisibles() {
      this.transactionRecordVisible = false
    },
  },
}
</script>

<style lang="scss" scoped>
.card {
  width: 100%;
  margin-bottom: 20px;

  &__header {
    display: flex;
    align-items: center;
    justify-content: space-between;

    &-button {
      margin-left: 10px;
      padding: 3px;
    }
  }

  &__content {
    width: 100%;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;

    &-number {
      font-weight: bold;
      font-size: 18px;
      line-height: 12px;
      color: #07c160;
    }

    &-number--warning {
      color: red;
    }
  }
}
</style>
